<template>
	<view class="test-pinia-page">
		缓存：{{test.count}}
		<view>
			<wd-button @click="onAdd1">方式1：直接操作</wd-button>
			<wd-button @click="onAdd2">方式2：$patch</wd-button>
			<wd-button @click="onAdd3">方式3：方法（action）</wd-button>
		</view>
		
		<view class="title">分析</view>
		<view class="item">1.pinia存在：Setup Store、Option Store两种方式，分别对应Vue3的选项式语法、组合式语法</view>
		<view class="item">2.本例子使用：Setup Store</view>
	</view>
</template>

<script lang="ts" setup>
import { useTestStore } from '@/stores/test';
const test = useTestStore()

/**
 * 方式1：直接操作
 */
function onAdd1(){
	test.count++
}

/**
 * 方式2：直接操作
 */
function onAdd2(){
	test.$patch({
		count:test.count*10
	})
}

/**
 * 方式3：直接操作
 */
function onAdd3(){
	test.increment()
}
</script>

<style lang="scss">
.test-pinia-page{
	.title{
		margin-top: 10px;
		font-size: 18px;
		font-weight: bold;
	}
}
</style>
